<template>
  <div class="work_in_process" v-loading="isLoading">
    <one-title :title="titleText" @refreshData="refresh">
      <div class="mes_btn">
        <el-button
          v-btn-permission="'export'"
          @click="handleExport">
          <i class="iconfont icon-btn_export"></i>
          导出
        </el-button>
      </div>
    </one-title>
    <div class="task_tree_container">
      <task-number-tree ref="taskList" @selectNode="selectNode" :isShowToggle="false"></task-number-tree>
      <div class="task_tree_content">
        <!--图表筛选组件-->
        <filter-panel :tabsList="tabsList" @filterChange="filterChange" :defaultTabIndex="0"></filter-panel>
        <div class="chart_content">
          <!--班组饼图-->
          <workgroup-pie
            ref="WorkgroupPie"
            class="chart_panel"
            :class="{'pie_self': chartType === 'workgroup'}"
            v-if="chartType === 'workgroup' && !isLoading && wipList.length > 0"></workgroup-pie>
          <div class="empty_pie" v-if="chartType === 'workgroup' && !isLoading && wipList.length === 0">
            <div class="empty_title">
              <p>在制品总数</p>0
            </div>
            <i class="iconfont icon-tubiaoyuanhuan-kong"></i>
          </div>
          <!--工作中心柱状图-->
          <work-center-bar
            ref="WorkCenterBar"
            class="chart_panel"
            v-if="chartType === 'workcenter' && !isLoading"></work-center-bar>
          <!--工序柱状图-->
          <workstage-bar
            ref="WorkstageBar"
            class="chart_panel"
            v-if="chartType === 'workstage' && !isLoading"></workstage-bar>
        </div>
        <!--表格-->
        <table-panel :turnoverBatchList="turnoverBatchList" v-if="!isLoading"></table-panel>
      </div>
    </div>
  </div>
</template>

<script>
import {WorkgroupPie, WorkCenterBar, WorkstageBar, TablePanel} from './components'
import FilterPanel from '@/components/chartFilterPanel/FilterPanel'
export default {
  name: 'WorkInProcess',
  components: {
    FilterPanel,
    WorkgroupPie,
    WorkCenterBar,
    WorkstageBar,
    TablePanel
  },
  data() {
    return {
      titleText: '在制品查询',
      tabsList: [{label: '班组', name: 'workgroup'}, {label: '工作中心', name: 'workcenter'}, {label: '工序', name: 'workstage'}],
      chartType: 'workgroup',
      taskNumber: '', // 当前任务号
      filter: {}, // 筛选对象
      turnoverBatchList: [], // 周转批次列表
      wipList: [{}], // 图表数据
      isLoading: true, // 加载中
    }
  },
  mounted() {
    this.$refs.taskList.init()
  },
  methods: {
    // 刷新
    refresh() {
      this.getChartData()
    },
    // 加载图表
    loadChart() {
      setTimeout(() => {
        if (this.chartType === 'workgroup' && this.wipList.length && this.wipList[0].name) {
          this.$refs.WorkgroupPie.getChart(this.wipList)
        }
        if (this.chartType === 'workcenter') {
          this.$refs.WorkCenterBar.getChart(this.wipList)
        }
        if (this.chartType === 'workstage') {
          this.$refs.WorkstageBar.getChart(this.wipList)
        }
      }, 200)
    },
    // 导出
    handleExport() {
      this.$exportTable(this.turnoverBatchList, 'a/turnoverworkstage/turnoverWorkstage/exportwipexcel', this.titleText)
    },
    // 树形节点选择
    selectNode(taskNumber) {
      if (taskNumber) {
        this.taskNumber = taskNumber
        this.getChartData()
      }
    },
    // 筛选条件改变
    filterChange(filter) {
      this.chartType = filter.tab
      this.filter = filter
      if (!this.taskNumber) return
      this.getChartData()
    },
    // 获取图表数据
    getChartData() {
      let postData = {
        taskNumber: this.taskNumber,
        selectType: this.chartType,
        beginDate: this.filter.completionDate[0],
        endDate: this.filter.completionDate[1]
      }
      this.isLoading = true
      this.$store.dispatch('saveData', {
        method: 'post',
        url: 'a/turnoverworkstage/turnoverWorkstage/wip',
        data: postData,
        noCommit: true
      }).then((res) => {
        const result = res.data
        if (result) {
          this.turnoverBatchList = result.turnoverBatchList
          this.wipList = result.wip
          this.isLoading = false
          this.loadChart()
        }
      }).catch(() => {
        this.isLoading = false
      })
    },
    /**
     * 提示
     * @param type 提示类型
     * @param str 提示内容
     */
    tipMessage(type, str) {
      this.$message({
        type: type,
        message: str,
        duration: 1500,
        center: true
      })
    }
  }
}
</script>

<style lang="less">
  .work_in_process{
    .chart_content{
      border: 1px solid #dcdfe6;
      margin: 20px;
    }
    .chart_panel{
      width: 99%;
      height: 400px;
      margin: 0 auto;
      div:first-child{
        width: 100%!important;
        canvas{
          width: 100%!important;
        }
      }
      &.pie_self{
        div:first-child{
          width: auto!important;
          canvas{
            width: auto!important;
          }
        }
      }
    }
    .empty_pie{
      width: 99%;
      height: 400px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      i{
        font-size: 280px!important;
        color:#dce1e9;
      }
      .empty_title{
        position: absolute;
        text-align: center;
        width: 100px;
        height: 82px;
        top:50%;
        left:calc(50% - 50px);
        margin-top: -30px;
        color:#000;
        font-size:32px;
        p{
          color: #7e8e9f;
          font-size: 14px;
          margin-bottom: 10px;
        }
      }
    }
  }
</style>
